import { querySectionGroup } from '@/services/api';
import { useQuery } from '@tanstack/react-query';
import type { ISectionGroup } from '@/interfaces';
import Alert from '@/app/[locale]/alert/alert';
import AlertLoad from '@/app/[locale]/alert/load';
import { useContext } from 'react';
import { SectionGroupAdminContext } from '@/contexts/admin/forum/sectionGroup';
import QuerySectionGroupSections from '@/app/[locale]/admin/forum/sectionGroup/detail/sections';
import QuerySectionGroupInfo from '@/app/[locale]/admin/forum/sectionGroup/detail/info';

export default function DetailsSectionGroupAdminPage() {
  const context = useContext(SectionGroupAdminContext);

  const querySectionGroupQuery = useQuery(
    ['/forum', '/sectionGroups', context.detailItem?.id],
    async (context) => {
      return (await querySectionGroup({
        id: context.queryKey[2] + '',
      })) as ISectionGroup;
    },
  );

  if (querySectionGroupQuery.data) {
    const data = querySectionGroupQuery.data;

    return (
      <div className="row">
        <div className="col">
          <div className="vstack gap-4">
            <QuerySectionGroupInfo details={data} />

            <QuerySectionGroupSections details={data} />
          </div>
        </div>
      </div>
    );
  }

  if (querySectionGroupQuery.error) {
    return <Alert type="error" message={querySectionGroupQuery.error} />;
  }

  return <AlertLoad />;
}
